<template>
  <div
    v-if="feedbackConfig.show"
    class="feedback flex flex-col justify-between"
  >
    <div>
      <img :src="successPng"  width="48" />
      <div class="text-shadow text-16 mt-24">
        {{ feedbackConfig.tips || '成功' }}
      </div>
      <div v-if="feedbackConfig.money" class="mt-8">
        <span class="text-dark text-24">￥</span>
        <span class="text-dark text-36 money"
          >{{ feedbackConfig.money.toFixed(2) || 0 }}
        </span>
      </div>
    </div>

    <div class="finished text-center">
      <button class="text-bold" @click="finished">完成</button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import successPng from '@/assets/images/success.png';
  import { feedbackConfig } from './feedback';

  const finished = () => {
    if (feedbackConfig.value.callback) {
      feedbackConfig.value.callback();
    }
    feedbackConfig.value.show = false;
  };
</script>

<style lang="scss" scoped>
  .feedback {
    width: 100%;
    height: 100vh;
    z-index: 25;
    background-color: white;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    padding: 40px 0;
    .finished {
      button {
        background-color: #f5f2f3;
        width: 120px;
        height: 32px;
        border-radius: 6px;
      }
    }
    .money {
      vertical-align: bottom;
      line-height: 24px;
    }
  }
</style>
